.caursel3d-container {
      position: relative;
      margin: 0 auto;
      display: block !important;
  }

  #wrap{
    position: relative;
  }
  
  #carousel {
    position: relative;
    width: 100%;
    height: 100%;
    margin: auto;
    transform-style: preserve-3d;
    -ms-transform-style:none;
    -ms-transform: none;
    transform: rotateY(0deg) translateZ(480px);
    animation-duration: 30s;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-name: rotation;
  }
  
  #carousel:hover {
      animation-play-state: paused;
  }
  
  #carousel figure {
      display: block;
      width: 336px;
      height: 208px;
      position: absolute;
      left: -40px;
      top: 10px;
      overflow: hidden;
  }
  .caursel3d img{
    cursor: pointer;
    transition: all .5s ease;
    width: 100%;
    height: 100%; }
  
  .caursel3d img:hover{
    transform: scale(1.2, 1.2); }
  
   .caursel3d {
          display: block;
          position: relative;
          margin: auto; 
          width: 336px;
          height: 208px;
          top: 100px;
          perspective: 2100px;
      }
  
      #carousel figure:nth-child(1) {
          transform: rotateY(0deg) translateZ(480px);
          -ms-transform: rotateY(0deg) translateZ(480px);
          -moz-transform: rotateY(0deg) translateZ(480px);
          -webkit-transform: rotateY(0deg) translateZ(480px);
          -o-transform: rotateY(0deg) translateZ(480px);
      }
  
      #carousel figure:nth-child(2) {
          transform: rotateY(45deg) translateZ(480px);
          -ms-transform: rotateY(45deg) translateZ(480px);
          -moz-transform: rotateY(45deg) translateZ(480px);
          -webkit-transform: rotateY(45deg) translateZ(480px);
          -o-transform: rotateY(45deg) translateZ(480px);
      }
  
      #carousel figure:nth-child(3) {
          transform: rotateY(90deg) translateZ(480px);
          -ms-transform: rotateY(90deg) translateZ(480px);
          -moz-transform: rotateY(90deg) translateZ(480px);
          -webkit-transform: rotateY(90deg) translateZ(480px);
          -o-transform: rotateY(90deg) translateZ(480px);
      }
  
      #carousel figure:nth-child(4) {
          transform: rotateY(135deg) translateZ(480px);
          -ms-transform: rotateY(135deg) translateZ(480px);
          -moz-transform: rotateY(135deg) translateZ(480px);
          -webkit-transform: rotateY(135deg) translateZ(480px);
          -o-transform: rotateY(135deg) translateZ(480px);
      }
  
      #carousel figure:nth-child(5) {
          transform: rotateY(180deg) translateZ(480px);
          -ms-transform: rotateY(180deg) translateZ(480px);
          -moz-transform: rotateY(180deg) translateZ(480px);
          -webkit-transform: rotateY(180deg) translateZ(480px);
          -o-transform: rotateY(180deg) translateZ(480px);
      }
  
      #carousel figure:nth-child(6) {
        transform: rotateY(225deg) translateZ(480px);
        -ms-transform: rotateY(225deg) translateZ(480px);
        -moz-transform: rotateY(225deg) translateZ(480px);
        -webkit-transform: rotateY(225deg) translateZ(480px);
        -o-transform: rotateY(225deg) translateZ(480px);
      }
  
      #carousel figure:nth-child(7) {
        transform: rotateY(270deg) translateZ(480px);
        -ms-transform: rotateY(270deg) translateZ(480px);
        -moz-transform: rotateY(270deg) translateZ(480px);
        -webkit-transform: rotateY(270deg) translateZ(480px);
        -o-transform: rotateY(270deg) translateZ(480px);
      }
  
      #carousel figure:nth-child(8) {
        transform: rotateY(315deg) translateZ(480px);
        -ms-transform: rotateY(315deg) translateZ(480px);
        -moz-transform: rotateY(315deg) translateZ(480px);
        -webkit-transform: rotateY(315deg) translateZ(480px);
        -o-transform: rotateY(315deg) translateZ(480px);
      }
  

      @keyframes rotation {
        from {
          transform: rotateY(0deg); }
      
        to {
          transform: rotateY(-360deg); } }
      
      @keyframes rotation1 {
        from {
          transform: rotateY(0deg); }
      
        to {
          transform: rotateY(-360deg); } }
      
      @keyframes rotation2 {
        from {
          transform: rotateY(-45deg); }
      
        to {
          transform: rotateY(-405deg); } }
      
      @keyframes rotation3 {
        from {
          transform: rotateY(-90deg); }
      
        to {
          transform: rotateY(-450deg); } }
      
      @keyframes rotation4 {
        from {
          transform: rotateY(-135deg); }
      
        to {
          transform: rotateY(-495deg); } }
      
      @keyframes rotation5 {
        from {
          transform: rotateY(-180deg); }
      
        to {
          transform: rotateY(-540deg); } }
      
      @keyframes rotation6 {
        from {
          transform: rotateY(-225deg); }
      
        to {
          transform: rotateY(-585deg); } }
      
      @keyframes rotation7 {
        from {
          transform: rotateY(-270deg); }
      
        to {
          transform: rotateY(-630deg); } }
      
      @keyframes rotation8 {
        from {
          transform: rotateY(-315deg); }
      
        to {
          transform: rotateY(-675deg); } }
  
  .webapp .caursel3d{
    width: 136px;
    height: 100px;
    top: 0;
    perspective: 1200px;
  }
  
.webapp #carousel figure{
  width: 136px;
  height: 100px;
}

.webapp #carousel figure:nth-child(1) {
  transform: rotateY(0deg) translateZ(180px);
}

.webapp #carousel figure:nth-child(2) {
  transform: rotateY(45deg) translateZ(180px);
}

.webapp #carousel figure:nth-child(3) {
  transform: rotateY(90deg) translateZ(180px);
}

.webapp #carousel figure:nth-child(4) {
  transform: rotateY(135deg) translateZ(180px);
}

.webapp #carousel figure:nth-child(5) {
  transform: rotateY(180deg) translateZ(180px);

}

.webapp #carousel figure:nth-child(6) {
transform: rotateY(225deg) translateZ(180px);

}

.webapp #carousel figure:nth-child(7) {
transform: rotateY(270deg) translateZ(180px);

}

.webapp #carousel figure:nth-child(8) {
transform: rotateY(315deg) translateZ(180px);

}